<template>


    <div class="picture-detail">

        <el-row :gutter="18" type="flex" justify="center" class="for-item" >
            <el-col :span="12" class="shadow">
                <div class="grid-content bg-purple">
                    <el-button icon="el-icon-shopping-cart-2" plain class="col-bottun">采集</el-button>
                    <el-button  plain class="category-bottun">{{category.name}}</el-button>
                    <el-image :src="picture.image" class="col-picture" style="width: 96%"></el-image>
                    <el-table-column style="margin-left: 20px">{{picture.description}}</el-table-column>
                    <i class="el-icon-s-promotion" style="margin-left: 20px">54</i>
                    <i class="el-icon-s-comment" >54</i>
                    <i class="el-icon-star-off" style="margin-top: 5px;margin-bottom: 10px">{{picture.updateTime|moment}}</i>
                </div>
            </el-col>

        </el-row>
        <el-row :gutter="18" type="flex" justify="center" class="for-item">
            <el-col  :xs="18" :sm="18" :md="16" :lg="8">
                <div class="shadow">
                    <el-row >
                        <el-col :span="12">
                            <p class="row-text">小金</p>
                            <span class="row-text">采集1000 </span>
                        </el-col>
                        <el-col :span="12">
                            <el-button type="primary" class="row-bottun">关注</el-button>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12"><el-image :src="picture.image" style="border-radius: 6px; margin: 5px 2px"/></el-col>
                        <el-col :span="12"><el-image :src="picture.image" style="border-radius: 6px; margin: 5px 2px"/></el-col>
                    </el-row>
                </div>
            </el-col>
            <div class="picture-qiang">
                <el-row  class="shadow">
                    <el-col  :md="24" :lg="24">
                        <el-image :src="src1"  style="margin-top: 20px;margin-bottom: 0px"></el-image>
                    </el-col>
                </el-row>
            </div>
        </el-row>
    </div>
</template>

<script>

    import { queryPictureById, queryPictureByCategory } from '../api'
    export default {
        name: "picture-detail",
        data(){
          return{
              picture: Object,
              category: Object,
              src: require('../assets/wallhaven-lq5k3r.jpg'),
              src1: require('../assets/webp1.jpg'),
              src2: require('../assets/webp2.jpg'),

          }
        },
        watch: {

        },
        methods: {
            queryPictureById(id){
                queryPictureById(id).then(res=>{
                    console.log(res.data)
                    this.picture = res.data
                    this.category = res.data.category
                }).catch(err=>{
                    console.log(err)
                })
            },
            queryPictureByCategory(id){
                queryPictureByCategory(id).then(res=>{
                    console.log(res)
                }).catch(err=>{
                    console.log(err)
                })
            }
        },
        mounted(){
            this.$nextTick(()=>{
                setInterval(console.log(this.category.name),500);

            })
        //     // this.queryPictureByCategory(this.category.id)
        },
        created(){
            this.queryPictureById(this.$route.params.id)

        },
    }
</script>

<style  lang="less">
    .for-item{
        margin-top: 100px;
    }
    .col-picture{
        margin: 20px 20px 20px 20px;

    }
    .col-bottun{
        margin-left: 20px;
        margin-top: 20px;
        background-color: #ed5a65;
        color: white;
    }
    .category-bottun{
        margin-left: 20px;
        margin-top: 20px;
        background-color: #ed5a65;
        color: white;
    }
    .row-text{
        margin-left: 20px;
        margin-top: 20px;
        margin-bottom: 5px;
        font-weight: bold;
    }
    .row-bottun{
        float: right;
        margin-right: 20px;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .shadow{
        float:left;
        transition-duration: 0.5s;
        border-radius: 10px;
        -webkit-box-shadow: #ccc 0px 10px 10px;
        -moz-box-shadow: #ccc 0px 10px 10px;
        box-shadow: #ccc 5px 5px 10px 5px;
    }
    @media screen and (max-width:900px){
        .picture-qiang{
            display: none;
        }
    }
</style>
